<template>
  <div>
<<<<<<< HEAD
    <el-card style="margin: 20px">
=======

    <el-card style="margin: 20px;">
>>>>>>> ff5ed2dad08ca8868046dc0ed459f600f13aedcd
      <!-- 操作区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button
            type="primary"
            plain
            @click="$refs.Addmenu.dialogShow = true"
            >创建菜单</el-button
          >
        </div>
      </el-row>
      <br />
      <!-- 表格区域 -->
      <el-table
        border
        stripe
        style="width: 100%"
        :data="list"
        row-key="id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column prop="permission_name" label="菜单名称">
        </el-table-column>
        <el-table-column prop="route" label="菜单地址"> </el-table-column>
        <el-table-column prop="permission_mark" label="权限标识">
        </el-table-column>
        <el-table-column prop="icon" label="图标" width="100px" :fit="true">
          <template slot-scope="{ row }">
            <svg-icon
              :icon-class="String(row.icon)"
              style="height: 30px; width: 16px; margin-right: 10px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="component" label="组件路径"> </el-table-column>
        <el-table-column prop="prop" label="是否显示">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.hidden"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              @change="changeFn(row.hidden, row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="created_at" label="创建时间"> </el-table-column>

        <el-table-column label="操作" fixed="right">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="edlFn(row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-plus"
              circle
              @click="addFn(row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <Addmenu ref="Addmenu" @updataList="initData"></Addmenu>
    </el-card>

  </div>
</template>

<script>

import IconSelect from "@/components/IconSelect";
import Addmenu from "./components/addMenu";
import { tranListToTreeData } from "@/utils/index";
import {
  getMenuListApi,
  showMenuListApi,
  delsublevelApi,
  srtsublevelCheckApi,
} from "@/api/permission/menu";
export default {
  name: "menuooo",
  components: { Addmenu, IconSelect },
  data() {
    return {
      fromData: {
        component: "11",
        created_at: "",
        creator_id: "",
        hidden: "",
        icon: "",
        id: "",
        islink: "1",
        keepalive: "1",
        parent_id: "1",
        permission_mark: "",
        permission_name: "",
        redirect: " ",
        route: "",
        sort: "10",
        type: "1",
        updated_at: "",
      },

      list: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      const res = await getMenuListApi();
      console.log(res);
      // this.list = tranListToTreeData(res, "0");
      this.list = res;
    },
    async edlFn(id) {
      this.$refs.Addmenu.fromData = await showMenuListApi(id);
      this.$refs.Addmenu.dialogShow = true;
    },
    addFn(id) {
      this.$refs.Addmenu.dialogShow = true;
      this.$refs.Addmenu.menusBtn = true;
      this.$refs.Addmenu.fromData.parent_id = id;
    },
    async delFn(id) {
      try {
        await this.$confirm("确定要删除吗");
      } catch (error) {
        return console.log(error);
      }
      await delsublevelApi(id);
      this.initData();
      this.$message.success("删除成功");
    },
    async changeFn(statu, id) {
      console.log(statu, id);
      await srtsublevelCheckApi(id, statu);
      this.initData();
      this.$message.success("切换成功");
    },
  },
};
</script>

<style>
</style>

